<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Expires" content="-1">
		<meta http-equiv="Cache-Control" content="no-cache">
		<meta http-equiv="Pragma" content="no-cache">
		<!--[if lt IE 9]>
            <script src=“js/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="js/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
		<link rel="stylesheet" href="css/renzheng.css" />

		<title>借条平台认证</title>
	</head>

	<body>
		<header>
			<div class="head_left">
				<canvas id="process" width="160" height="160"></canvas>
			</div>
			<div class="head_right">
				<canvas id="process1" width="160" height="160"></canvas>
			</div>
		</header>
		<div class="main">
			<ul class="main_ul">
				<li>
					<a href="yunyingshang.html">
						<div class="main_small">
							<span class="span3"><img src="images/yunying.png" alt="" /><span class="span1"><img src="images/ok.png" alt="" /></span></span>
							<span class="span2">运营商</span>
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div class="main_small">
							<span class="span3"><img src="images/tongxun.png" alt="" /><span class="span1" style="display: none;"><img src="images/ok.png" alt="" /></span></span>
							<span class="span2">通讯录</span>
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div class="main_small">
							<span class="span3"><img src="images/tb.png" alt="" /><span class="span1" style="display: none;"><img src="images/ok.png" alt="" /></span></span>
							<span class="span2">淘宝</span>
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div class="main_small">
							<span class="span3"><img src="images/jd.png" alt="" /><span class="span1" style="display: none;"><img src="images/ok.png" alt="" /></span></span>
							<span class="span2">京东</span>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/renzheng.js"></script>
	<script src="js/flexible.js"></script>
	<script>
		(function() {
			var c = document.getElementById('process'),
				process = 0,
				ctx = c.getContext('2d');

			// 画白色的圆

			ctx.beginPath();
			ctx.arc(93, 100, 60, 0, Math.PI * 2);
			ctx.closePath();

			ctx.fillStyle = '#fff';
			ctx.fill();

			function animate() {
				requestAnimationFrame(function() {
					process = process + 1;
					drawCricle(ctx, process);
					if(process < 100) {
						animate();
					}
				});
			}

			function drawCricle(ctx, percent) {
				// 画进度环
				ctx.beginPath();
				ctx.moveTo(93, 100);
				ctx.arc(93, 100, 60, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100));
				ctx.closePath();
				ctx.fillStyle = '#FF9600';
				ctx.fill();

				// 画内填充圆
				ctx.beginPath();
				ctx.arc(93, 100, 57, 0, Math.PI * 2);
				ctx.closePath();
				ctx.fillStyle = '#3762FF';
				ctx.fill();

				// 填充文字
				ctx.font = "15pt Microsoft YaHei";
				ctx.fillStyle = '#fff';
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.moveTo(93, 100);
				ctx.fillText("基础资料", 93, 100);
			}
			animate();
		}());
	</script>
	<script>
		(function() {
			var c = document.getElementById('process1'),
				process = 0,
				ctx = c.getContext('2d');

			// 画白色的圆
			ctx.beginPath();
			ctx.arc(80, 100, 60, 0, Math.PI * 2);
			ctx.closePath();
			ctx.fillStyle = '#fff';
			ctx.fill();

			function animate() {
				requestAnimationFrame(function() {
					process = process + 1;
					drawCricle(ctx, process);
					if(process < 100) {
						animate();
					}
				});
			}

			function drawCricle(ctx, percent) {
				// 画进度环
				ctx.beginPath();
				ctx.moveTo(80, 100);
				ctx.arc(80, 100, 60, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100));
				ctx.closePath();
				ctx.fillStyle = 'green';
				ctx.fill();

				// 画内填充圆
				ctx.beginPath();
				ctx.arc(80, 100, 57, 0, Math.PI * 2);
				ctx.closePath();
				ctx.fillStyle = '#3762FF';
				ctx.fill();

				// 填充文字
				ctx.font = "15pt Microsoft YaHei";
				ctx.fillStyle = '#fff';
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.moveTo(80, 100);
				ctx.fillText("负债认证", 80, 100);
			}
			animate();
		}());
	</script>

</html>